<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-row >
        <el-form-item label="公司名称" prop="tableName">
          <el-input
            v-model="queryParams.compName"
            placeholder="请输入公司名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="流程名称" prop="tableComment">
          <el-input
            v-model="queryParams.ruleName"
            placeholder="请输入流程名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="流程编号" prop="tableComment">
          <el-input
            v-model="queryParams.ruleNo"
            placeholder="请输入流程编号"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="cyan" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-add"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleEdit"
        >修改
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
        >删除
        </el-button>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      @selection-change="handleSelectionChange"
      :filter-method="filterTableData"
      style="width: 100%;margin-top: 10px;"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column
        label="序号"
        width="70"
        align="center" >
        <template v-slot="scope">
          {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="compName" width="180" :show-overflow-tooltip="true" label="公司名称" align="center"/>
      <el-table-column prop="ruleName" :show-overflow-tooltip="true" label="流程名称" align="center"/>
      <el-table-column prop="ruleNo" width="120" label="流程编号" align="center"/>
      <el-table-column prop="ruleClass" label="审批模块" align="center"/>
      <el-table-column prop="auditType" label="审批类型" align="center"/>
      <el-table-column prop="approvalLevel" label="审批层级" align="center"/>
      <el-table-column label="审批详情" align="center">
        <template v-slot="scope">
          <el-button
            type="text"
            size="small"
            @click="details(scope.row)"> 详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="isDelete" label="状态" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.isDelete === '00'">启用</span>
          <span v-if="scope.row.isDelete === '01'">禁用</span>
        </template>
      </el-table-column>
      <el-table-column prop="createUser" :show-overflow-tooltip="true" label="创建人" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" width="160" align="center"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template v-slot="scope">
          <el-switch v-model="scope.row.isDelete ==='00'" @change="switchStatus(scope.row)"/>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      background
      :current-page="pageNum"
      :total="total"
      :page-size="pageSize"
      style="padding: 30px 0; text-align: right;"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

    <el-dialog
      title="审批明细"
      :visible.sync="dialogVisible"
      width="40%">
      <el-table
        v-loading="listLoading"
        :data="detailsList"
        border
        style="width: 100%;margin-top: 10px;">

        <el-table-column label="人员" prop="person"/>
        <el-table-column label="角色" prop="role"/>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import api from '@/api/tool/approval'

export default {
  name: 'ApprovalList',
  data() {
    return {
      listLoading: false,
      list: null,
      total: 0,
      pageNum: 1,
      pageSize: 10,

      createTimes: [],
      showSearch: true,
      queryParams: {},

      dialogVisible: false,

      detailsList: null,

      // 选中数组
      ids: [],
      // 选中表数组
      tableNames: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true
    }
  },
  created() {
    // 调用列表方法
    this.fetchData()
  },
  methods: {

    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.ruleId)
      this.tableNames = selection.map(item => item.ruleName)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    handleQuery() {
      this.pageNum = 1
      this.fetchData()
    },
    resetQuery() {
      this.queryParams = {}
      this.createTimes = []
      this.handleQuery()
    },
    handleAdd() {
      this.$router.push('/tool/addOrEdit')
    },
    handleEdit() {
      if (Object.keys(this.ids).length !== 1) {
        this.$message.error('请选择一条数据修改!')
        return
      }
      this.$router.push('/tool/addOrEdit/?ruleId=' + this.ids[0])
    },
    switchStatus(row) {
      const obj = { ruleId: row.ruleId, isDelete: row.isDelete }
      api.updateState(obj).then(res => {
        if (res.code === 200) {
          this.$message.success('修改成功!')
          this.fetchData()
        } else {
          this.$message.error('修改失败!')
        }
      })
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = this.ids
      this.$confirm('是否确认删除"' + ids + '"的数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return api.delRule(ids)
      }).then(() => {
        this.fetchData()
        this.$message.success('删除成功')
      })
    },

    fetchData(pageNum = 1) {
      this.pageNum = pageNum
      if (this.createTimes && this.createTimes.length === 2) {
        this.queryParams.beginTime = this.createTimes[0]
        this.queryParams.endTime = this.createTimes[1]
      }
      api.getPageList(this.pageNum, this.pageSize, this.queryParams).then(response => {
        this.list = response.data.records
        this.total = response.data.total
      })
    },

    details(row) {
      api.appDetails(row.ruleId).then(res => {
        if (res.code === 200) {
          this.detailsList = res.data
          this.dialogVisible = true
        }
      })
    },

    filterTableData(value, row) {
      if (!this.filter) {
        return true
      }
      const filter = this.filter.toLowerCase()
      return Object.keys(row).some(key => {
        return String(row[key]).toLowerCase().indexOf(filter) > -1
      })
    }

  }
}
</script>
